<template>
  <div>
    <home-header :city="city"></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
  </div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios' /* 引入axios */
export default {
  name: 'Home',
  /* 这个名字是组件的名字 */
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  data () {
    return {
      city: '',
      swiperList: [], /* 默认是个空数组 */
      iconList: [],
      weekendList: [],
      recommendList: []
    }
  },
  methods: { /* 这里定义函数 */
    getHomeInfo () { /* 定义函数的方法 */
      axios.get('/api/index.json') /* 这个get方法帮助我们获取ajax数据，去请求一个url */
        .then(this.getHomeInfoSucc) /* 请求完成，axios返回一个对象 */
    },
    getHomeInfoSucc (res) { /* 返回的结果 */
      res = res.data /* 首先拿到ajax的数据 */
      if (res.ret && res.data) { /* 做一个判断:如果后端（打开浏览器输入网址，
      可以看到console.log中，返回的数据，ret 为true是表示获取ajax数据成功）
      正确返回结果ret，并且有res.data这个结果 */
        const data = res.data /* 定义一个变量，将set.data赋值给data。后面就可以直接用date了 */
        this.city = data.city /* 拿到数据后，修改设置的初始值city */
        this.swiperList = data.swiperList /* 拿到数据后，修改设置的初始值swiperList */
        this.iconList = data.iconList
        this.weekendList = data.weekendList
        this.recommendList = data.recommendList
      }
      console.log(res) /* 查看这个对象返回的结果 */
    }
  },
  mounted () { /* 生命周期函数，ajax代码就写在这里 */
    this.getHomeInfo() /* 页面挂载好，首先执行这个函数。这个函数要定义在methods中 */
  }
}
</script>
<style>

</style>
